{layout name="layout" /}

<style>
    .wechat-view{
        width:320px;
        height:520px;
        position:relative;
        background-color:#f5f5f5;
    }
    .wechat-view .view-header{
        height:80px;
        background-repeat:no-repeat;
        text-align:center;
        color:white;
        background-image:url("/static/layuiadmin/style/res/wechat/mobile_head.png");
    }
    .wechat-view .view-footer{
        position:absolute;
        left:0px;
        bottom:0px;
        width:inherit;
        height:50px;
        padding-left:50px;
        background-repeat:no-repeat;
        background-image:url("/static/layuiadmin/style/res/wechat/mobile_foot.png");
    }
    .wechat-view .view-footer li{
        width:90px;
        height:50px;
        cursor:pointer;
        line-height:50px;
        text-align:center;
        border-right:1px solid #e7e7eb;
    }
    .wechat-view .view-body{
        
    }
    .flex{
        display:flex;
        flex-flow:row;
    }
    .submenu{
        position:absolute;
        bottom:-0px;
        padding-bottom:50px;
    }
    .submenu li{
        border:1px solid #e7e7eb;
    }
    .wechat-view .view-footer ul li.li-selected
    ,ul.submenu li.li-selected{
        border:1px solid red;
    }
    .menu-header .float-right{
        position:absolute;
        top:0px;
        right:0px;
        margin-top:-30px;
    }
</style>

<div class="">
    <div class="layui-fluid">
        <div class="layui-col-sm4">
            <div class="wechat-view">
                <div class="view-header">
                    <span style="line-height:90px;">公众号</span>
                    <div><span style="background-color:rgb(103, 106, 108);border-radius: 25px;"><?php echo date('H:i') ?></span></div>
                </div>
                <div class="view-body">
                    
                </div>
                <div class="view-footer">
                    <ul class="flex" id="menu-tabs">
                    {foreach $model as $key=>$menu } 
                        <li data-tab-menu="top" id="{$menu->id}" data-index="{$key}">
                            <i hidden class="layui-icon layui-icon-add-1"></i>
                            <span>{$menu->name }</span>
                            <ul class="submenu">
                            {foreach $menu->subMenu as $subKey=>$menuItem}
                                <li id="{$menuItem->id}" data-index="$subkey">
                                    <i hidden class="layui-icon layui-icon-add-1"></i>
                                    <span>{$menuItem->name}</span>
                                </li>
                            {/foreach}
                            </ul>
                        </li>
                    {/foreach}
                    </ul>
                </div>
            </div>
        </div>

        <div class="layui-col-sm6">
            <div class="layui-form">
                <div class="layui-card" style="height:520px;">
                    <div class="layui-card-header">微信菜单</div>
                    <div class="layui-card-body" id="menu-body">
                    {foreach $model as $index=>$menu}
                    <div hidden data-menu-content data-tab="{$menu->id}" id="tab-item-{$menu->id}">
                        <div class="menu-header">
                            <div class="float-right">
                                <button data-btn="remove" class="layui-btn">删除</button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">菜单名称</label>
                            <div class="layui-input-block">
                                <input class="layui-input" data-input="menu" value="{$menu->name}" type="text" name="name[{$index}]" placeholder="请输菜单名称" lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">菜单类型</label>
                            <div class="layui-input-block">
                            <?php $key=$menu->type ?>
                                <select name="type[{$index}]" lay-filter="replyType" lay-verify="required">
                                    <option {$key=="click"?"selected":""} value="click">关键字</option>
                                    <option {$key=="view"?"selected":""} value="view">跳转网页</option>
                                    <option {$key=="miniprogram"?"selected":""} value="miniprogram">跳转小程序</option>
                                    <option {$key=="view_limited"?"selected":""} value="view_limited">图文素材</option>
                                </select>
                            </div>
                        </div>
                        <div data-reply="content">
                            <div class="layui-form-item" {$key=="click"?"":"hidden"} type="click">
                                <label class="layui-form-label">关键字</label>
                                <div class="layui-input-block">
                                    <input name="keyword[{$index}]" value="{$menu->keyword|default=''}" placeholder="请输入关键字" autocomplete="off" class="layui-input"/>
                                </div>
                            </div>

                            <div class="layui-form-item" {$key=="view"?"":"hidden"} type="view">
                                <label class="layui-form-label">跳转地址</label>
                                <div class="layui-input-block">
                                    <input name="url[{$index}]" value="{$menu->url}" layui-verityf="url" placeholder="请输入跳转地址" autocomplete="off" class="layui-input"/>
                                </div>
                            </div>

                            <div {$key=="miniprogram"?"":"hidden"} type="miniprogram">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">appid</label>
                                    <div class="layui-input-block">    
                                        <input name="appid[{$index}]" value="{$menu->appid}" placeholder="请输入appid" autocomplete="off" class="layui-input"/>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">小程序路径</label>
                                    <div class="layui-input-block">
                                        <input name="appPath[{$index}]" value="{$menu->appPath}" placeholder="请输入小程序路径" autocomplete="off" class="layui-input"/>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">网页链接</label>
                                    <div class="layui-input-block">
                                        <input name="appUrl[{$index}]" value="{$menu->appUrl}" layui-verityf="url" placeholder="请输入网页链接" class="layui-input"/>
                                    </div>
                                </div>
                            </div>

                            <div {$key=="view_limited"?"":"hidden"} type="view_limited">
                                <label class="layui-form-label">选择图文</label>
                                <div class="layui-input-inline">
                                    <button type="button" class="layui-btn" id="openNews">选择图文消息</button>
                                    <div class="layui-upload-list" style="width:100px;height:200px;">
                                        <img class="layui-upload-img" style="width:auto;height:auto;max-width=100%;max-height:100%;" data-media="news" src="{$menu->article->assets->path|default=''}">
                                        <p data-media-title="news">{$menu->article->title|default=''}</p>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" data-media-id="news" name="mediaId[{$index}]" value="{$menu->mediaId}">
                        </div>
                        <input type="hidden" name="id[{$index}]" value="{$menu->id}">
                    </div>

                    {foreach $menu->subMenu as $subIndex=>$menuItem}
                    <div hidden data-menu-content data-tab="{$menuItem->id}"id="tab-item-{$menuItem->id}">
                        <div class="menu-header">
                            <div class="float-right">
                                <button data-btn="remove" class="layui-btn">删除</button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">菜单名称</label>
                            <div class="layui-input-block">
                                <input class="layui-input" data-input="menu" value="{$menuItem->name}" type="text" name="name[subMenu][{$index}][{$subIndex}]" placeholder="请输菜单名称" lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">菜单类型</label>
                            <div class="layui-input-block">
                            <?php $type=$menuItem->type ?>
                                <select name="type[subMenu][{$index}][{$subIndex}]" lay-filter="replyType" lay-verify="required">
                                    <option {$type=="click"?"selected":""} value="click">关键字</option>
                                    <option {$type=="view"?"selected":""} value="view">跳转网页</option>
                                    <option {$type=="miniprogram"?"selected":""} value="miniprogram">跳转小程序</option>
                                    <option {$type=="view_limited"?"selected":""} value="view_limited">图文素材</option>
                                </select>
                            </div>
                        </div>
                        <div data-reply="content">
                            <div class="layui-form-item" {$type=="click"?"":"hidden"} type="click">
                                <label class="layui-form-label">关键字</label>
                                <div class="layui-input-block">
                                    <input name="keyword[subMenu][{$index}][{$subIndex}]" value="{$menuItem->keyword}" placeholder="请输入关键字" autocomplete="off" class="layui-input"/>
                                </div>
                            </div>

                            <div class="layui-form-item" {$type=="view"?"":"hidden"} type="view">
                                <label class="layui-form-label">跳转地址</label>
                                <div class="layui-input-block">
                                    <input name="url[subMenu][{$index}][{$subIndex}]" value="{$menuItem->url}" layui-verityf="url" placeholder="请输入跳转地址" autocomplete="off" class="layui-input"/>
                                </div>
                            </div>

                            <div {$type=="miniprogram"?"":"hidden"} type="miniprogram">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">appid</label>
                                    <div class="layui-input-block">    
                                        <input name="appid[subMenu][{$index}][{$subIndex}]" value="{$menuItem->appid}" placeholder="请输入appid" autocomplete="off" class="layui-input"/>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">小程序路径</label>
                                    <div class="layui-input-block">
                                        <input name="appPath[subMenu][{$index}][{$subIndex}]" value="{$menuItem->appPath}" placeholder="请输入小程序路径" autocomplete="off" class="layui-input"/>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">网页链接</label>
                                    <div class="layui-input-block">
                                        <input name="appUrl[subMenu][{$index}][{$subIndex}]" value="{$menuItem->appUrl}" layui-verityf="url" placeholder="请输入网页链接" class="layui-input"/>
                                    </div>
                                </div>
                            </div>

                            <div {$type=="view_limited"?"":"hidden"} type="view_limited">
                                <label class="layui-form-label">选择图文</label>
                                <div class="layui-input-inline">
                                    <button type="button" class="layui-btn" id="openNews">选择图文消息</button>
                                    <div class="layui-upload-list" style="width:100px;height:200px;">
                                        <img class="layui-upload-img" style="width:auto;height:auto;max-width=100%;max-height:100%;" data-media="news" src="">
                                        <p data-media-title="news"></p>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" data-media-id="news" name="mediaId[subMenu][{$index}][{$subIndex}]" value="{$menuItem->mediaId}">
                        </div>
                        <input type="hidden" name="id[subMenu][{$index}][{$subIndex}]" value="{$menuItem->id}">
                    </div>
                    {/foreach}
                    {/foreach}
                    </div>
                    
                    <div class="layui-form-item">
                        <input style="position:absolute;bottom:0px;" type="button" class="layui-btn layui-btn-fluid" lay-submit lay-filter="zbc-wechat-submit" value="确认">
                     </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script id="menuContent" type="text/html">
<div data-menu-content data-tab="{{d.tabId}}">
    <div class="menu-header">
        <div class="float-right">
            <button data-btn="remove" class="layui-btn">删除</button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单名称</label>
        <div class="layui-input-block">
            <input class="layui-input" data-input="menu" type="text" name="name[{{d.index}}]" placeholder="请输菜单名称" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单类型</label>
        <div class="layui-input-block">
        <?php $type="click" ?>
            <select name="type[{{d.index}}]" lay-filter="replyType" lay-verify="required">
                <option {$type=="click"?"selected":""} value="click">关键字</option>
                <option {$type=="view"?"selected":""} value="view">跳转网页</option>
                <option {$type=="miniprogram"?"selected":""} value="miniprogram">跳转小程序</option>
                <option {$type=="view_limited"?"selected":""} value="view_limited">图文素材</option>
            </select>
        </div>
    </div>
    <div data-reply="content">
        <div class="layui-form-item" {$type=="click"?"":"hidden"} type="click">
            <label class="layui-form-label">关键字</label>
            <div class="layui-input-block">
                <input name="keyword[{{d.index}}]" value="{$model->keyword|default=''}" placeholder="请输入关键字" autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item" {$type=="view"?"":"hidden"} type="view">
            <label class="layui-form-label">跳转地址</label>
            <div class="layui-input-block">
                <input name="url[{{d.index}}]" layui-verityf="url" placeholder="请输入跳转地址" autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div {$type=="miniprogram"?"":"hidden"} type="miniprogram">
            <div class="layui-form-item">
                <label class="layui-form-label">appid</label>
                <div class="layui-input-block">    
                    <input name="appid[{{d.index}}]" placeholder="请输入appid" autocomplete="off" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">小程序路径</label>
                <div class="layui-input-block">
                    <input name="appPath[{{d.index}}]" placeholder="请输入小程序路径" autocomplete="off" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">网页链接</label>
                <div class="layui-input-block">
                    <input name="appUrl[{{d.index}}]" layui-verityf="url" placeholder="请输入网页链接" class="layui-input"/>
                </div>
            </div>
        </div>

        <div {$type=="view_limited"?"":"hidden"} type="view_limited">
            <label class="layui-form-label">选择图文</label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="openNews">选择图文消息</button>
                <div class="layui-upload-list" style="width:100px;height:200px;">
                    <img class="layui-upload-img" style="width:auto;height:auto;max-width=100%;max-height:100%;" data-media="news" src="">
                    <p data-media-title="news"></p>
                </div>
            </div>
        </div>
        <input type="hidden" data-media-id="news" name="mediaId[{{d.index}}]" value="">
    </div>
</div>
</script>

<script id="subMenuContent" type="text/html">
<div data-menu-content data-tab="{{d.tabId}}">
    <div class="menu-header">
        <div class="float-right">
            <button data-btn="remove" class="layui-btn">删除</button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单名称</label>
        <div class="layui-input-block">
            <input class="layui-input" data-input="menu" type="text" name="name[subMenu][{{d.parentIndex}}][{{d.index}}]" placeholder="请输菜单名称" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单类型</label>
        <div class="layui-input-block">
        <?php $type="click" ?>
            <select name="type[subMenu][{{d.parentIndex}}][{{d.index}}]" lay-filter="replyType" lay-verify="required">
                <option {$type=="click"?"selected":""} value="click">关键字</option>
                <option {$type=="view"?"selected":""} value="view">跳转网页</option>
                <option {$type=="miniprogram"?"selected":""} value="miniprogram">跳转小程序</option>
                <option {$type=="view_limited"?"selected":""} value="view_limited">图文素材</option>
            </select>
        </div>
    </div>
    <div data-reply="content">
        <div class="layui-form-item" {$type=="click"?"":"hidden"} type="click">
            <label class="layui-form-label">关键字</label>
            <div class="layui-input-block">
                <input name="keyword[subMenu][{{d.parentIndex}}][{{d.index}}]" value="" placeholder="请输入关键字" autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item" {$type=="view"?"":"hidden"} type="view">
            <label class="layui-form-label">跳转地址</label>
            <div class="layui-input-block">
                <input name="url[subMenu][{{d.parentIndex}}][{{d.index}}]" layui-verityf="url" placeholder="请输入跳转地址" autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div {$type=="miniprogram"?"":"hidden"} type="miniprogram">
            <div class="layui-form-item">
                <label class="layui-form-label">appid</label>
                <div class="layui-input-block">    
                    <input name="appid[subMenu][{{d.parentIndex}}][{{d.index}}]" placeholder="请输入appid" autocomplete="off" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">小程序路径</label>
                <div class="layui-input-block">
                    <input name="appPath[subMenu][{{d.parentIndex}}][{{d.index}}]" placeholder="请输入小程序路径" autocomplete="off" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">网页链接</label>
                <div class="layui-input-block">
                    <input name="appUrl[subMenu][{{d.parentIndex}}][{{d.index}}]" layui-verityf="url" placeholder="请输入网页链接" class="layui-input"/>
                </div>
            </div>
        </div>

        <div {$type=="view_limited"?"":"hidden"} type="view_limited">
            <label class="layui-form-label">选择图文</label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="openNews">选择图文消息</button>
                <div class="layui-upload-list" style="width:100px;height:200px;">
                    <img class="layui-upload-img" style="width:auto;height:auto;max-width=100%;max-height:100%;" data-media="news" src="">
                    <p data-media-title="news"></p>
                </div>
            </div>
        </div>
        <input type="hidden" data-media-id="news" name="mediaId[subMenu][{{d.parentIndex}}][{{d.index}}]" value="">
    </div>
</div>
</script>

<script id="subMenuTab" type="text/html">
 <li data-index="{{d.index}}">
    <i class="layui-icon layui-icon-add-1"></i>
    <span>菜单</span>
</li>
</script>
<script id="topMenuTab" type="text/html">
 <li data-tab-menu="top" data-index="{{d.index}}">
    <i class="layui-icon layui-icon-add-1"></i>
    <span>菜单</span>
    <ul class="submenu"></ul>
</li>
</script>

<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','layer', 'form','upload'], function () {
        var $ = layui.$
            , form = layui.form
            , layer=layui.layer
            , laytpl=layui.laytpl
            , view=layui.view
            , upload = layui.upload;

        
        $(document).on("click","#openNews",function(){
            var $this=$(this);
                layer.open({
                title: '图文列表',
                type:2,
                area:['1024px', '600px'],
                content: '/admin/wechatArticle/list',
                btn:["确定","取消"],
                yes:function(index,layero){
                    var selected=layero.find("iframe").contents().find("[data-selected=true]")
                    var id=selected.attr("data-news");
                    var path=selected.attr("data-path");
                    var title=selected.attr("data-title");
                    
                    var parent=$this.parents("[data-menu-content]");
                    if(parent){
                        var mediaTitle=parent.find("[data-media-title=news]");
                        var mediaImage=parent.find("[data-media=news]");
                        var mediaId=parent.find("[data-media-id=news]");
                        if(mediaImage) mediaImage.attr("src",path);
                        if(mediaTitle) mediaTitle.text(title);
                        if(mediaId) mediaId.val(id);
                    }
                    layer.close(index);
                }
            }); 
        })
        
        var content={};
        {foreach $model as $key=>$menu}
            content[{$menu->id}]="tab-item-{$menu->id}";
            {foreach $menu->subMenu as $subKey=>$menuItem}
            content[{$menuItem->id}]="tab-item-{$menuItem->id}";
            {/foreach}
        {/foreach}
        
        $(document).on("click","#menu-tabs li",function(event){
            event.stopPropagation();
            var $this=$(this);
            var id=$this.attr("id");
            var top=$this.attr("data-tab-menu")=="top";
            $("#menu-tabs li").removeClass("li-selected");
            $this.addClass("li-selected");
            
            if(id){
                $("#"+content[id])
                .show()
                .siblings()
                .hide();
                return;
            }

            id=get_uuid();
            $this.attr("id",id);
            content[id]="tab-item-"+id;
            $this.children("i").hide();
            
            var $parent=$this.parents("li");
            if(top){
                checkedTopTab($this);
            }else{
                checkedTopTab($parent);
            }

            var menuBody=top?menuContent.innerHTML:subMenuContent.innerHTML;
            var data={
                parentIndex:$parent.attr("data-index"),
                index:$this.attr("data-index"),
                tabId:id
            };
            
            laytpl(menuBody).render(data, function(html){
                $("#menu-body").append(html);
                $("[data-menu-content]:last")
                .attr("id",content[id])
                .show()
                .siblings()
                .hide();
            });    

            form.render();
        })

        $(document).on("change","[data-input=menu]",function(){
            
            var $this=$(this);
            tabId=$this.parents("[data-menu-content]").attr("data-tab");
            
            $("#"+tabId).children("span").text($this.val());
        })

        $(document).on("click","[data-btn=remove]",function(){
            var $this=$(this);
            var $parent=$this.parents("[data-menu-content]");
            var tabId=$parent.attr("data-tab");
            var $thisTab=$("#"+tabId);

            $parent.remove();
            delete content[tabId];

            var isSubTab=$("#"+tabId).parents(".submenu").length>0;
            if(isSubTab){
                $thisTab.remove();
                var $parentTab=$thisTab.parents("ul");
                checkedTopTab($parentTab);
            }else{
                clearTopWithSubTabs($thisTab);
                $thisTab.attr("id","").children("i").show()
                $thisTab.children("span").text("菜单");
            }
        })
         //监听提交
        form.on('submit(zbc-wechat-submit)', function(data){
            view.req({
              url:"/admin/wechatmenu/update",
              data: data.field,
              method: 'post',
              success: function (result) {
                if (result.data) {
                  layer.msg("已完成");
                  location.reload();
                } else {
                  layer.msg(result.msg, { icon: 4 });
                }
              }
            })

            return false;
        });

        form.on("select(replyType)",function(data){
            var prent=$(this).parents("[data-menu-content]");
            var reply=prent.find("[data-reply=content] [type="+data.value+"]");
            if(!reply) return;
            reply.show().siblings("div [type]").hide();
        })
        
        checkedMenu();
        function checkedMenu(){
            $("#menu-tabs>li").each(function(){
                var $this=$(this);
                if($this.index()==0){
                    $this.click();
                }
                checkedTopTab($this);
            })
            var $tabs=$("#menu-tabs>li");
            var $lastTab=$tabs.last();
            var tabIndex=$lastTab?Number($lastTab.attr("data-index")):0;
            tabIndex=tabIndex?tabIndex+1:0;
            
            for(var i=3-$tabs.length;i>0;i--){
                var tabHtml=topMenuTab.innerHTML;
                var data={
                    index:tabIndex
                };
                tabIndex++;
                
                laytpl(tabHtml).render(data, function(html){
                    $("#menu-tabs").append(html);
                });   
            }
        }
        
        function checkedTopTab($tab){
            var $this=$($tab);
            if(!$this.attr("id")) return;
            var $subitems=$this.find("ul>li");

            if($subitems.length<5){
                var $lastTab=$subitems.last();
                var nextIndex=0;
                if($lastTab){
                    var index=$lastTab.attr("data-index");
                    index=Number(index);
                    nextIndex=index?index:nextIndex;
                    nextIndex++;
                }
                var tabHtml=subMenuTab.innerHTML;
                var data={
                    index:nextIndex
                };
                laytpl(tabHtml).render(data, function(html){
                    $this.find("ul").append(html);
                }); 
            }
        }
        function clearTopWithSubTabs(tab){
            var $this=$(tab);
            var id=$this.attr("id");
            if(id){
                $("#"+content[id]).remove();
                $this.attr("id","");
                delete content[id];
            }
            
            $this.find("ul>li").each(function(){
                var $subThis=$(this);
                var tabId=$subThis.attr("id");
                var menuBodyId=content[tabId];
                $("#"+menuBodyId).remove();
                $subThis.remove();
                delete content[tabId];
            })
            
        }
    });

    function get_uuid(){
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4";  
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); 
        var uuid = s.join("");
        return uuid;
    }
</script>